<template>
    <div id="app">
        <base-header />
        <router-view :tips="tips"/>
        <base-footer />
        <back-top />
    </div>
</template>

<script>
import BaseHeader from '@/components/common/Header'
import BaseFooter from '@/components/common/Footer'
import BackTop from '@/components/common/BackTop'
import { signIn, getTags } from '@/../api/api.js'
import store from '@/store/index.js'
import Axios from 'axios'

export default {
    name: 'App',
    components: {
        BaseFooter,
        BaseHeader,
        BackTop,
    },
    data(){
        return {
            tips: ""
        }
    },
    created() {
        Axios.post(signIn)
        .then(Response => {
            if (Response.data.message == 'success') {
                store.commit('updateUser',Response.data.data.user);
                store.commit('updateIsUser');
            } 
        })
        .catch(err => {
            console.log(err);
        });
        Axios.get(getTags)
        .then(Response => {
            if (Response.data.message == 'success') {
                store.commit('updateTags',Response.data.data.tags);
            }
        })
        .catch(err => {
            console.log(err);
        });
    },
    
}
</script>

<style lang="stylus">
/* CSS Reset */
html
    width 100%
    font-size $base_fs
    color $base_color
    line-height 1.5em
    background-color $base-bgc
    overflow-x hidden
body
    margin 0
    min-height 100vh
    color $base_fc
    overflow hidden
    padding-top $header_height
a
    color $base_color
    text-decoration none
p
    margin 0
ul
    padding 0
input,
textarea,
button
    outline none
    border none
    resize none
/* 容器 */
.wrapper
    width 1200px
    margin 0 auto
/* 阴影动画 */  
.hover-shadow 
        transition transform .1s ease-in-out, box-shadow .3s cubic-bezier(.47, 0, .745, .715), border .3s linear .1s
        border-radius 8px
        box-shadow 0 0 8px rgb(219, 216, 216)
        &:hover
            box-shadow 0 0 35px rgba(99, 97, 97, 0.3)
            -webkit-transform translateY(-5px)
            -moz-transform translateY(-5px)
            transform translateY(-5px)   

.a-rowArray
    display flex
</style>

